<template>
  <div class="video-wrap">
    <video-player
      ref="videoPlay"
      class="ln-video"
      model="flv"
      :url="url"
      @click.capture="handleSelectPane()"
      @closeVideo="closeVideoEmit()"
      @ifRecord="ifRecord"
      @voiceRecord="voiceRecord()"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'

const videoPlay = ref(null)

// const emit = defineEmits([
//   'setCameraTreeSelected',
//   'closeVideo',
//   'ifRecord',
//   'voiceRecord'
// ])

defineProps({
  url: {
    type: String,
    default: ''
  }
})

onMounted(() => {
  // 关闭后，可以执行这段代码，再次打开视频
  nextTick(() => {
    videoPlay.value.createPlayer() // 创建播放器
  })
})

function handleSelectPane() {
  console.log('点击视频')
}

function closeVideoEmit() {
  console.log('点击关闭视频')
}

// 录屏暂停逻辑处理
const ifRecordStatus = ref(false)
// 录屏逻辑处理
const ifRecord = (flag) => {
  console.log('录屏状态flag: ', flag)
  ifRecordStatus.value = flag

  // emit('ifRecord', flag)
}

// const isVoiced = computed(() => {
//   return store.isVoiced
// })

// 语音对讲逻辑处理
const voiceRecord = (data) => {
  // if (isVoiced.value) {
  //   if (data[0].type !== 'stop')
  //     return message.error('已有相机在进行语音对讲！')
  //   else {
  //     emit('voiceRecord', false, data[0])
  //   }
  // } else {
  //   emit('voiceRecord', true, data[0])
  // }
}
</script>

<style lang="less" scoped>
.video-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  cursor: pointer;

  .ln-video {
    flex: 1;

    &.active {
      background: pink;
      border-color: blue;
    }
  }
}
</style>
